<template>
  <div style="padding: 0 10px">
    <el-button
      type="text"
      @click="close"
    >
      关闭
    </el-button>
    <el-collapse
      v-if="items.length"
      v-model="activeNames"
    >
      <el-collapse-item
        v-for="(item,Index) in items"
        :key="Index"
        :name="Index"
      >
        <template slot="title">
          {{ `审批编号：${item.no}` }}
          <el-tag
            size="mini"
            v-if="item.resultStatus == null"
          >
            审评中
          </el-tag>
          <el-tag
            size="mini"
            type="success"
            v-if="item.resultStatus === 1"
          >
            通过
          </el-tag>
          <el-tag
            size="mini"
            type="danger"
            v-if="item.resultStatus === 2"
          >
            退回
          </el-tag>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(log,index) in item.logEntitys"
            :key="index"
            :timestamp="$_util.formatDate(log.createTime)"
            placement="top"
          >
            <el-card>
              <h4>
                {{ log.taskStatusText }}
                <el-tag
                  v-if="log.resultStatus === 1"
                  style="margin-left: 10px"
                  type="success"
                  size="small"
                >
                  通过
                </el-tag>
                <el-tag
                  v-if="log.resultStatus === 2"
                  style="margin-left: 10px"
                  type="danger"
                  size="small"
                >
                  退回
                </el-tag>
                <el-tag
                  v-if="log.resultStatus === null"
                  style="margin-left: 10px"
                  size="small"
                >
                  等待审批
                </el-tag>
              </h4>
              <template v-if="log.resultStatus">
                <p
                  class="p"
                  v-if="log.collaborators && log.collaborators.length"
                >
                  协作人：<UserInfo
                    v-for="ii in log.collaborators"
                    :key="ii.id"
                    :id="ii.id"
                    tag
                    :name="ii.name"
                  ></UserInfo>
                </p>
                <p class="p">
                  操作人：<UserInfo
                    :id="log.userId"
                    :name=" log.userName"
                  ></UserInfo>
                </p>
                <p
                  class="p"
                  v-if="log.content"
                >
                  审批意见：{{ log.content }}
                </p>
                <p
                  class="p"
                  v-if="log.annex && log.annex.length"
                >
                  <span style="color: #1f7bfe">附件：</span><br>
                  <Annex
                    v-for="(an,li) in log.annex"
                    :key="li"
                    :name="an.name"
                    :url="an.url"
                  />
                </p>
              </template>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-collapse-item>
    </el-collapse>
    <el-alert
      v-else
      type="error"
      :closable="false"
    >
      没有数据
    </el-alert>
  </div>
</template>

<script>
  import Annex from '@/component/approval/Annex'

  export default {
    name: 'Approval',
    components: { Annex },
    props: {
      formId: {
        type: Number,
        default: 0
      }
    },
    watch: {
      formId (newValue, oldValue) {
        if (newValue !== oldValue) {
          this.getLogs()
        }
      }
    },
    data () {
      return {
        activeNames: [0],
        items: []
      }
    },
    created () {
      this.getLogs()
    },
    methods: {
      async getLogs () {
        const { data } = await this.$service.gzl.formProcess(this.formId)
        this.items = data.data.map(item => {
          const { logEntitys = [] } = item
          return {
            ...item,
            logEntitys: logEntitys.map(log => {
              return { ...log, annex: log.annex ? JSON.parse(log.annex) : '', collaborators: log.collaborators ? JSON.parse(log.collaborators) : [] }
            })
          }
        })
      },
      close () {
        this.$emit('close')
      }
    }
  }
</script>

<style scoped>

</style>
